<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MultiDEX - Admin Dashboard</title>
  <link rel="stylesheet" href="/css/admin.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div class="admin-container">
    <aside class="sidebar">
      <h2>Admin Panel</h2>
      <nav>
        <ul>
          <li><a href="#dashboard" class="active">Dashboard</a></li>
          <li><a href="#transactions">Transactions</a></li>
          <li><a href="#risk">Risk Management</a></li>
          <li><a href="#system">System Settings</a></li>
          <li><a href="#users">User Management</a></li>
        </ul>
      </nav>
    </aside>

    <main class="content">
      <section id="dashboard" class="active-section">
        <h1>System Dashboard</h1>
        
        <div class="stats-row">
          <div class="stat-card">
            <h3>Total Volume</h3>
            <p id="totalVolume">$0</p>
          </div>
          <div class="stat-card">
            <h3>Active Users</h3>
            <p id="activeUsers">0</p>
          </div>
          <div class="stat-card">
            <h3>Pending Issues</h3>
            <p id="pendingIssues">0</p>
          </div>
        </div>

        <div class="chart-row">
          <div class="chart-card">
            <h3>Daily Volume</h3>
            <canvas id="volumeChart"></canvas>
          </div>
          <div class="chart-card">
            <h3>Risk Distribution</h3>
            <canvas id="riskChart"></canvas>
          </div>
        </div>
      </section>

      <section id="transactions" class="hidden-section">
        <h1>Transaction Monitoring</h1>
        
        <div class="filters">
          <div>
            <label>Chain:</label>
            <select id="chainFilter">
              <option value="all">All Chains</option>
              <option value="56">BSC</option>
              <option value="137">Polygon</option>
            </select>
          </div>
          <div>
            <label>Risk Level:</label>
            <select id="riskFilter">
              <option value="all">All</option>
              <option value="high">High</option>
              <option value="medium">Medium</option>
              <option value="low">Low</option>
            </select>
          </div>
          <div>
            <label>Date Range:</label>
            <input type="date" id="startDate">
            <input type="date" id="endDate">
          </div>
          <button id="applyFilters" class="btn">Apply</button>
        </div>

        <table class="transactions-table">
          <thead>
            <tr>
              <th>TX Hash</th>
              <th>User</th>
              <th>Amount</th>
              <th>Chain</th>
              <th>Risk Level</th>
              <th>Timestamp</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody id="transactionsBody">
            <!-- Transactions will be loaded here -->
          </tbody>
        </table>
        
        <div class="pagination" id="pagination"></div>
      </section>

      <section id="risk" class="hidden-section">
        <h1>Risk Management</h1>
        
        <div class="risk-controls">
          <div class="control-group">
            <h3>System Parameters</h3>
            <div class="input-group">
              <label>Max Slippage (%)</label>
              <input type="number" id="maxSlippage" min="0.1" max="10" step="0.1">
              <button id="updateSlippage" class="btn">Update</button>
            </div>
            <div class="input-group">
              <label>Min Liquidity ($)</label>
              <input type="number" id="minLiquidity">
              <button id="updateLiquidity" class="btn">Update</button>
            </div>
          </div>
          
          <div class="control-group">
            <h3>Address Management</h3>
            <div class="input-group">
              <label>Block Address</label>
              <input type="text" id="blockAddress" placeholder="0x...">
              <button id="blockBtn" class="btn">Block</button>
            </div>
            <div class="input-group">
              <label>Unblock Address</label>
              <input type="text" id="unblockAddress" placeholder="0x...">
              <button id="unblockBtn" class="btn">Unblock</button>
            </div>
          </div>
        </div>
        
        <div class="suspicious-activity">
          <h3>Suspicious Activity</h3>
          <div class="activity-list" id="suspiciousList">
            <!-- Suspicious activities will be loaded here -->
          </div>
        </div>
      </section>
    </main>
  </div>

  <script type="module" src="/js/admin.js"></script>
</body>
</html>